<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
     <el-table-column label="序号" type="index" :index="indexMethod">
      </el-table-column>
      <el-table-column prop="appoTime" label="约定还款时间" width="150">
      </el-table-column>
      <el-table-column prop="conId" label="合同id" width="100">
      </el-table-column>
      <el-table-column prop="cusId" label="客户id" width="100">
      </el-table-column>
      <el-table-column prop="money" label="应还款" width="100">
      </el-table-column>
      <el-table-column prop="principal" label="本金" width="100">
      </el-table-column>
      <el-table-column prop="interest" label="利息" width="100">
      </el-table-column>
      <el-table-column prop="actualTime" label="实际还款时间" width="150">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
           <el-button @click="repaymentConfirm(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框 -->
    <el-dialog title="还款信息确定" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="当前还款id" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="还款客户姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form.user.name"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="合同编号" :label-width="formLabelWidth">
          <el-input
            v-model="form.contract.number"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
         <el-form-item label="应还欠款" :label-width="formLabelWidth">
          <el-input
            v-model="form.money"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
         <el-form-item label="应还本金" :label-width="formLabelWidth">
          <el-input
            v-model="form.principal"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
         <el-form-item label="应还利息" :label-width="formLabelWidth">
          <el-input
            v-model="form.interest"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="还款方式" :label-width="formLabelWidth">
          <el-select
            v-model="form.repaymentMethodId"
            placeholder="请选择还款方式"
          >
            <el-option
              v-for="item in repaymentMethod"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="违期罚息" :label-width="formLabelWidth">
          <el-input
            v-model="form.penaltyInterest"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="是否偿还违期罚息" v-if="result">
          <el-radio v-model="form.radio" label="y">偿还</el-radio>
          <el-radio v-model="form.radio" label="n">不偿还</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Repayment"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import server from "@/global.js";
export default {
  // props: ["conId"],
  data() {
    return {
      tableData: [],
      formLabelWidth: "120px",
      dialogFormVisible: false,
      form: {
        id: "",
        user: "",
        contract: "",
        penaltyInterest: "",
        repaymentMethodId: "",
        money:"",
        principal:"",
        interest:"",
        radio: "y",
      },
      result: false,
      repaymentMethod:[],
      customerId:"",
    };
  },
  created: function () {
    this.$axios({
      url: server.server + "/api/repayment/getAppointRepayment",
      method: "post",
      data: {
        empId: 1,
        conId: this.$route.query.conId, //得到同级组件传递的值
      },
    }).then((r) => {
      if (r.data.code == 200) {
        this.tableData = r.data.data;
      } else {
        window.alert(r.data.message);
      }
    });
  },
  methods: {
    //执行还款
    repaymentConfirm(row) {
      this.form.money = row.money;
      this.form.principal = row.principal;
      this.form.interest = row.interest;
      this.customerId = row.cusId;
      console.log("得到的数据是：" + row.id);
      console.log("得到的数据是：" + row.conId);
      console.log("得到的数据是：" + row.cusId);
      console.log("得到的金额是：" + row.money);
      this.dialogFormVisible = true;
      //执行显示内容
      this.$axios({
        url:server.server+"/api/repaymentMethod/getAll",
        method:"get",
      }).then(r=>{
          if(r.data.code==200){
            this.repaymentMethod = r.data.data;
          }
      })
      this.$axios({
        url: server.server + "/api/repayment/getRepaymentAllInfo",
        method: "post",
        data: {
          id: row.id,
          conId: row.conId,
          cusId: row.cusId,
        },
      }).then((r) => {
        if (r.data.code == 200) {
          let obj = r.data.data;
          this.form.id = row.id,
          this.form.user = obj.user;
          this.form.contract = obj.contract;
          this.form.penaltyInterest = obj.penaltyInterest;
          if(obj.penaltyInterest!=0){
            this.result = true;
          }
          console.log(r);
        } else {
          window.alert(r.data.message);
        }
      });
    },
    Repayment(){
      this.$axios({
        url:server.server+"/api/repayment/update",
        method:"post",
        data:{
          id:this.form.id,
          cusId:this.customerId,
          conId:this.form.contract.id,
          repaymentMethodId:this.form.repaymentMethodId,
          penaltyStatus:this.form.redio
        }
      }).then(r=>{
        alert(r.data.message);
        this.dialogFormVisible = false;
        window.location.reload();
      })

      console.log("得到的结果是："+this.form.id,this.customerId,this.form.contract.id,this.form.repaymentMethodId,this.form.radio)
    }
  },
};
</script>